<template>

    <div class="emb-txt-envelope">
        <div class="emb-txt-warper" :class="{ active: active }">

            <figure>
                <img v-if="envelopeFormat == ''" src="@/assets/images/designer/designer-envelope-normal.png" alt="">

                <img v-if="envelopeFormat == 'bridge-concave-top'"
                    src="@/assets/images/designer/designer-envelope-bridge-concave-top.png" alt="">
                <img v-if="envelopeFormat == 'bridge-concave-bottom'"
                    src="@/assets/images/designer/designer-envelope-bridge-concave-bottom.png" alt="">
                <img v-if="envelopeFormat == 'double-concave-bridges'"
                    src="@/assets/images/designer/designer-envelope-double-concave-bridges.png" alt="">

                <img v-if="envelopeFormat == 'bridge-convex-top'"
                    src="@/assets/images/designer/designer-envelope-bridge-convex-top.png" alt="">
                <img v-if="envelopeFormat == 'bridge-convex-bottom'"
                    src="@/assets/images/designer/designer-envelope-bridge-convex-bottom.png" alt="">
                <img v-if="envelopeFormat == 'double-convex-bridges'"
                    src="@/assets/images/designer/designer-envelope-double-convex-bridges.png" alt="">

                <img v-if="envelopeFormat == 'convex-top-concave-bottom'"
                    src="@/assets/images/designer/designer-envelope-convex-top-concave-bottom.png" alt="">
                <img v-if="envelopeFormat == 'concave-top-convex-bottom'"
                    src="@/assets/images/designer/designer-envelope-concave-top-convex-bottom.png" alt="">

                <img v-if="envelopeFormat == 'pennant-right'"
                    src="@/assets/images/designer/designer-envelope-pennant-right.png" alt="">
                <img v-if="envelopeFormat == 'pennant-left'"
                    src="@/assets/images/designer/designer-envelope-pennant-left.png" alt="">

                <svg-icon name="tree-down" />
            </figure>
            <blockquote>
                <ul>
                    <li @click="setEnvelope('')"><img src="@/assets/images/designer/designer-envelope-normal.png"
                            alt=""></li>

                    <li @click="setEnvelope('bridge-concave-top')"><img
                            src="@/assets/images/designer/designer-envelope-bridge-concave-top.png" alt=""></li>
                    <li @click="setEnvelope('bridge-concave-bottom')"><img
                            src="@/assets/images/designer/designer-envelope-bridge-concave-bottom.png" alt=""></li>
                    <li @click="setEnvelope('double-concave-bridges')"><img
                            src="@/assets/images/designer/designer-envelope-double-concave-bridges.png" alt=""></li>

                    <li @click="setEnvelope('bridge-convex-top')"><img
                            src="@/assets/images/designer/designer-envelope-bridge-convex-top.png" alt=""></li>
                    <li @click="setEnvelope('bridge-convex-bottom')"><img
                            src="@/assets/images/designer/designer-envelope-bridge-convex-bottom.png" alt=""></li>
                    <li @click="setEnvelope('double-convex-bridges')"><img
                            src="@/assets/images/designer/designer-envelope-double-convex-bridges.png" alt=""></li>

                    <li @click="setEnvelope('convex-top-concave-bottom')"><img
                            src="@/assets/images/designer/designer-envelope-convex-top-concave-bottom.png" alt=""></li>
                    <li @click="setEnvelope('concave-top-convex-bottom')"><img
                            src="@/assets/images/designer/designer-envelope-concave-top-convex-bottom.png" alt=""></li>

                    <li @click="setEnvelope('pennant-right')"><img
                            src="@/assets/images/designer/designer-envelope-pennant-right.png" alt=""></li>
                    <li @click="setEnvelope('pennant-left')"><img
                            src="@/assets/images/designer/designer-envelope-pennant-left.png" alt=""></li>
                </ul>
            </blockquote>

        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: { type: String, default: () => '' },
        font: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            active: false,
            envelope_map: {
                'etBridgeConcaveTop': 'bridge-concave-top',
                'etBridgeConcaveBottom': 'bridge-concave-bottom',
                'etDoubleConcaveBridges': 'double-concave-bridges',
                'etBridgeConvexTop': 'bridge-convex-top',
                'etBridgeConvexBottom': 'bridge-convex-bottom',
                'etDoubleConvexBridges': 'double-convex-bridges',
                'etConvexTopConcaveBottom': 'convex-top-concave-bottom',
                'etConcaveTopConvexBottom': 'concave-top-convex-bottom',
                'etPennantRight': 'pennant-right',
                'etPennantLeft': 'pennant-left',
            }
        };
    },

    computed: {

        envelopeFormat: {
            get () {
                return this.envelope_map[this.value] || ''
            },
            set (val) {
                const key = Object.keys(this.envelope_map).find(i => this.envelope_map[i] == val) || ''
                this.$emit('input', key)
            }
        },

    },


    methods: {

        // 设置变形
        setEnvelope (val) {
            this.envelopeFormat = val;
        },

        onClick (event) {
            const button = event.target.closest('.emb-txt-warper')
            const contains = this.$el.contains(event.target)

            if (contains && button) {
                event.stopPropagation();
                event.preventDefault();
                this.active = !this.active;
            } else if (contains && event.target.closest('.emb-txt-envelope figure')) {
                // 对话框中的，不管
                event.stopPropagation();
                event.preventDefault();
            } else {
                this.active = false
            }
        },
    },

    mounted () {
        window.addEventListener('click', this.onClick)
    },
    beforeDestroy () {
        window.removeEventListener('click', this.onClick)
    }
};
</script>

<style lang="scss" scoped>
.emb-txt-envelope {
    .emb-txt-warper {
        position: relative;
        width: 340px;
        padding-bottom: 6px;

        figure {
            height: 56px;
            display: flex;
            align-items: center;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            box-sizing: border-box;
            padding: 0 12px;
            position: relative;
            cursor: pointer;

            img {
                height: 40px;
            }

            svg {
                position: absolute;
                right: 12px;
                top: 50%;
                width: 12px;
                height: 12px;
                margin-top: -6px;
                transition: all 0.2s;
            }

            &:hover {
                border-color: #C7C7C7;
            }
        }

        blockquote {
            position: absolute;
            left: 0;
            top: 80%;
            width: 100%;
            margin: 0;
            background: #ffffff;
            box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
            border-radius: 8px;
            border: 1px solid #ebebeb;
            z-index: 1;
            max-height: 500px;
            overflow: auto;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s;
        }

        ul {
            display: flex;
            flex-direction: column;
            padding: 6px;

            li {
                height: 52px;
                box-sizing: border-box;
                padding: 6px;
                display: flex;
                align-items: center;
                border-radius: 8px;
                cursor: pointer;

                img {
                    height: 40px;
                }

                &:hover {
                    background-color: #f6f6f6;
                }
            }
        }

        &.active {
            figure {
                border-color: #F6B2CD;
                box-shadow: 0px 0px 0px 1px #F6B2CD;

                svg {
                    transform: rotate(180deg);
                }
            }

            blockquote {
                top: 100%;
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}
</style>
